<template>
  <view class="m-10px bg-white">
    <wd-segmented
      size="middle"
      :options="infoViewList"
      v-model:value="currentInfoView"
      @change="currentInfoViewChange"
    ></wd-segmented>
    <view class="info-list mt-10px">
      <!-- <wd-tag type="primary" round class="mr-10px">比赛日期 2024/12/24 星期三</wd-tag>
      <wd-tag type="primary" round class="mr-10px">比赛状态 全部</wd-tag>
      <wd-tag type="primary" round class="mr-10px">比赛轮次 第一轮</wd-tag> -->
    </view>
    <view class="info-view bg-#F5F5F5 p-10px">
      <MatchList
        v-if="currentInfoView === '赛程'"
        :groupInfo="selectGroupInfo"
        :players="players"
        :stageInfo="stageInfo"
      ></MatchList>
      <MatchGraph
        v-else-if="currentInfoView === '对阵图'"
        :groupInfo="selectGroupInfo"
        :players="players"
        :stageInfo="stageInfo"
      ></MatchGraph>
      <playerList
        v-else-if="currentInfoView === '选手信息'"
        :groupInfo="selectGroupInfo"
        :players="players"
      ></playerList>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MatchList from './matchList.vue'
import playerList from './playerList.vue'
import MatchGraph from './matchGraph.vue'
import { Stage } from '@/championship'

const props = defineProps<{
  stageInfo: Stage
}>()

const selectGroupInfo = ref(props.stageInfo.groups[0])
const players = ref(props.stageInfo.players)
// const infoViewList = ref(['赛程', '选手信息', '对阵图'])
const infoViewList = ref([
  { value: '赛程', key: 0 },
  // { value: '选手信息', key: 1 },
  { value: '对阵图', key: 2 },
])
const currentInfoView = ref(infoViewList.value[0].value)
const currentInfoViewChange = (newValue) => {
  currentInfoView.value = newValue.value
}
</script>
